import React from 'react';
import { Form, Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { uploadToken } from '@/services/ant-design-pro/api';


const QINIU_SERVER = 'https://upload-z2.qiniup.com';    // 华南地区

/**
 * 视频上传组件
 *
 * props 值列表：
 * - value: form 中的值。多个视频链接以英文逗号分隔
 * - max: 最多可以上传几个视频。max = 1 可上传一张，不设置则可上传无限多。
 **/
class QiniuUploadVideo extends React.Component {
    constructor(props) {
        super(props);
        let _state = {
            token: '',
            filePrefix: '',
            urlPrefix: '',
            fileList: [],
            max: this.props.max,
        };

        if (this.props.value) {
            let urls = this.props.value.split(",");
            let i = -1;
            for (let url of urls) {
                _state.fileList.push({
                    uid: i + "",
                    name: '视频',
                    status: 'done',
                    url: url,
                })
            }
        }

        this.state = _state;
    }

    async componentDidMount() {
        await this.init();
    }

    init = async () => {
        try {
            const data = await uploadToken();
            console.log(data);

            this.setState({
                token: data.uploadToken,
                filePrefix: data.filePrefix,
                urlPrefix: data.urlPrefix,
            });
        } catch (error) {
            message.error(error);
        }
    };

    handleChange = ({ file, fileList, event }) => {
        const { status, response } = file
        if (status === 'done') {
            // 上传成功
            const { key, hash } = response
            if (key) {
                message.success("上传成功")
                let imgs = [];
                for (let file2 of fileList) {
                    if (file2.url) {
                        imgs.push(file2.url);
                    } else {
                        imgs.push(this.state.urlPrefix + "/" + file2.response.key);
                    }
                }
                // 调用父组件 onChange 方法, 将新值传递回去
                this.props.onChange(imgs.join(","))
            } else {
                message.error("上传失败")
            }
        }
        this.setState({ fileList })
    };

    getExtraData = file => {
        const { token, filePrefix } = this.state;

        return {
            token: token,
            key: filePrefix + "_" + file.name,
        };
    };

    render() {
        const uploadButton = (
            <Button icon={<UploadOutlined />}>点击上传视频</Button>
        );
        const props = {
            action: QINIU_SERVER,
            name: 'file',
            fileList: this.state.fileList,
            //listType: "picture-card",
            onChange: this.handleChange,
            data: this.getExtraData,
        };
        return (
            <Upload {...props}>
                {(this.state.max && this.state.fileList.length >= this.state.max) ? null : uploadButton}
            </Upload>
        );
    }
}

export default QiniuUploadVideo;